<template>
  <div class="relative inline" :style="{width: width, height: height}">
    <div v-if="$Browser().trident"  :style="{width: width, height: height}">
      <object classid="clsid:9ECD2A40-1222-432E-A4D4-154C7CAB9DE3" style="border:0px solid black;z-index: 2" width="100%" :style="{height: `${contentHeight-30}px`}" ref="spv" id="spv">
        <param name="border" value="0" />
      </object>
    </div>
    <div v-else class="video-no">请使用ie浏览器</div>
  </div>
</template>

<script>
  import mixin from './mixin'
  export default {
    mixins: [mixin],
    name: 'zz-video',
    data () {
      return {
        project_name: '碧桂园森林城市',
        region_name: '东莞区域',
        monitor_name: '1号监控 | 围墙',
        timer: null,
        xmlSource: null,
        departmentName: '',
        projectName: '',
        cameraType: 0,
        Fluency_type: 1   // 0 是主码流 1 是字码流
      }
    },
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      }
    },
    mounted () {
      window.SINGOCXVIEDEO = this
      if (this.$Browser().trident) {
        this.getXML()
        window.onbeforeload = () => {
          this.UninitSpvx()
        }
      }
    },
    activated () {
      // this.$refs.spv.MPV_StopAllPreview()
      this.Fluency_type = 1
      this.getXML()
    },
    methods: {
      // 获取视频码流xml
      getXML () {
        const data = {
          'videoUuid': this.$route.query.cameraId
        }
        this.$axios({
          closeLoading: true,
          method: 'post',
          url: `${this.$site.videoServer}/api/hikvision8700/getPreviewParam`,
          data: this.$qs.stringify(data)
        }).then(res => {
          // console.log(res.data.data)
          if (res.data.success === true) {
            this.projectName = res.data.data.projectName
            this.departmentName = res.data.data.departmentName
            this.xmlSource = res.data.data.previewParam
            this.cameraType = res.data.data.cameraType
            this.$emit('getCameraType')
            this.InitSpvx()
          } else {
            alert('视频流获取失败')
          }
        })
      },
      // 1.初始化视频插件，1是中文，2是英文
      InitSpvx () {
        let ocxObj = this.$refs.spv
        let languageType = 1
        let ret = ocxObj.MPV_Init(languageType)
        if (ret !== 0) {
          alert('单路预览初始化失败')
        } else {
          this.SetLocalParam()
        }
      },
      // 2.设置预览窗口大小，抓图、录像参数
      SetLocalParam () {
        let ocxObj = this.$refs.spv
        let height = this.$refs.spv.offsetHeight
        let width = this.$refs.spv.offsetWidth
        let xml = '<?xml version="1.0" encoding="UTF-8"?> ' +
          '<localParam> ' +
          '<width>' + width + '</width> ' +
          '<height>' + height + '</height> ' +
          '<picType>1</picType> ' +
          '<capturePath>C:Hikvision</capturePath> ' +
          '<recordSize>2</recordSize> ' +
          '<recordPath>C:Hikvision</recordPath> ' +
          '<limitPreviewTime> 0 </limitPreviewTime> ' +
          '</localParam>'
        let ret = ocxObj.MPV_SetLocalParam(xml)
        if (ret !== 0) {
          alert('单路预览设置本地参数失败')
        } else {
          this.HiddenMainToolBar()
          this.SetWnd()
          this.SPV_StartPreview()
          this.$emit('initsuccess')
        }
      },
      switch_Fluency () {
        let ocxObj = this.$refs.spv
        if (this.Fluency_type === 0) {
          this.Fluency_type = 1
          let data = this.xmlSource.replace(':MAIN:', ':SUB:')
          ocxObj.MPV_StartPreview(data)
        } else {
          this.Fluency_type = 0
          let data = this.xmlSource.replace(':SUB:', ':MAIN:')
          ocxObj.MPV_StartPreview(data)
        }
      },
      // 预览xml视频流
      SPV_StartPreview () {
        if (!this.xmlSource) return
        let ocxObj = this.$refs.spv
        let data = this.xmlSource.replace(':MAIN:', ':SUB:')
        let ret = ocxObj.MPV_StartPreview(data)
        if (ret !== 0) {
          this.$message.error('单路预览失败')
        } else {
          // 清除所有工具栏
          this.SPV_SetToolBar()
        }
      },
      // 设置工具条按钮接口
      SPV_SetToolBar (id) {
        let ocxObj = this.$refs.spv
        let ret = ocxObj.MPV_SetToolBar(id)
        if (ret !== 0) {
          alert('设置工具条失败！')
        } else {
          // this.SetOSD()
        }
      },
      // 设置主工具栏显示/隐藏接口
      HiddenMainToolBar () {
        let ocxObj = this.$refs.spv
        let ret = ocxObj.MPV_ShowMainToolBar(0)
        if (ret !== 0) {
          alert('显示主工具栏失败')
        }
      },
      // 开始云台控制
      SPV_PTZCtrl (action, commond) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        let ocxObj = this.$refs.spv
        let ret = ''
        if (this.cameraType === 2) {
          ret = ocxObj.MPV_PTZCtrl(-1, action, commond, 1)
        }
        if (action === 1) {
          if (this.cameraType === 2) {
            if (ret !== 0) {
              this.$emit('failed')
            } else {
              this.$emit('success')
            }
          } else {
            this.$emit('noSupport')
          }
        }
      },
      // 设置分屏数接口
      SetWnd () {
        let ocxObj = this.$refs.spv
        let ret = ocxObj.MPV_SetPlayWndCount(1)
        if (ret !== 0) {
          alert('设置分屏失败！')
        }
      },
      // 设置文字
      SetSpvOSD () {
        setTimeout(() => {
          let ocxObj = this.$refs.spv
          let xml = '<?xml version="1.0" encoding="UTF-8"?> ' +
            '<textInfo> ' +
            '<text>' + this.projectName + '(' + this.departmentName + ')' + '</text> ' +
            '<cameraUuid>' + this.$route.query.cameraId + '</cameraUuid> ' +
            '<location>' + 4 + '</location> ' +
            '<fontSize>' + 30 + '</fontSize> ' +
            '<RGB>' + '0xf2f2f2' + '</RGB> ' +
            '</textInfo>'
          let ret = ocxObj.MPV_SetOSDText(xml)
          if (ret !== 0) {
            // alert('字符叠加失败！')
          } else {
            // alert('成功')
          }
        }, 3000)
      },
      // 停止预览
      UninitSpvx () {
        let ocxObj = this.$refs.spv
        let ret = ocxObj.PVX_Uninit()
        if (ret !== 0) {
          this.$message.error('单路预览反初始化失败')
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .header_title {
    width: 180px;
    background-color: rgba(0,0,0,.1);
    text-align: center;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    height: 35px;
    line-height: 35px;
    color: #f2f2f2;
  }
  .footer_introduce {
    padding: 0 20px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: rgba(0,0,0,.3);
    position: absolute;
    left: 0px;
    bottom: 0px;
    box-sizing: border-box;
    .left_intro {
      p{
        padding-left: 10px;
        color: #00e8ff;
      }
    }
    .right_intro {
      p {
        color: #f2f2f2;
      }
    }
  }
  .video-no{
    color: #fff;
    text-align: center;
  }
</style>
